@mixin pr(){
   
   position: relative;
   

}

/*  声明css绝对定位的混合 */

@mixin pa($y,$x){

	position: absolute;
	top: $y;
	left:$x;
}

/* 声明背景图片的css混合 */

@mixin bgImg($url,$y,$x,$wid){

	background-image: url($url);
	background-position: $y $x;
	background-repeat: no-repeat;
	background-size: $wid;


}
@mixin bgImgs($url,$y,$x){

  background-image: url($url);
  background-position: $y $x;
  background-repeat: no-repeat;
}

@mixin pf($y:0,$x:0){
	position: fixed;
	top: $y;
	left: $x;
}

header{
  width: 750px;
  position: fixed;
  top: 0px;
  padding-top: 43px;
  .nav{
  	width: 90%;
  	margin: 0px auto;
  	display: flex;
  	justify-content:space-between;
  }
  .nav>div{
     flex-basis:20%;
     text-align: center;

  }
  .nav>div:nth-of-type(1){
     text-align: left;
     .back{

     	 width: 120px;
     	 height: 55px;
     	 border:2px solid #ff9a50;
     	 text-align: center;
     	 line-height: 55px;
     	 border-radius: 20px;
     	 font-size: 26px;
     	 color: #000;
     	 font-weight: bold;

     }
  } 
  .nav>div:nth-of-type(2){
      flex:1;
      line-height: 55px;
      font-size: 26px;
  } 
  .nav>div:nth-of-type(3){
      text-align: right;
  } 

  
}

/* header ned */

.banner{
  width: 100%;
  float: left;
  margin-top: 140px;
  .banner_box{
     width: 90%;
     margin:0px  auto;
     
     

    .big_felx{
     
     overflow: hidden;
     padding-bottom: 30px;
     height: 180px;
    
     &:after{
       content:"";
       width: 0px;
       display: block;
       overflow: hidden;
       clear: both;
     }
     @include pr();

     input{

         display:none;
     }
     label{
         @include pa(92%,48%);
         display: block;
         width: 17px;
         height: 17px;
         background-color:#ffc9a1;
         z-index: 999;
         border-radius: 50%;
         transition:all .3s linear;
         cursor: pointer;

     }
     #pa_1{

          left: 42%;
     }
     #pa_2{

          left: 47%;
     }
     #pa_3{

          left: 52%;
     }
     #pa_4{

          left: 57%;
     }

     .flex_child{
        width: 400%;
        display: flex;
        @include pa(0,0);
        transition:all .3s linear;
        

     }
     .flex_child>div{
         flex-basis:30%;
         
         display: flex;
         justify-content:space-between;
        

         
     }

     .flex_child>div>div{
          flex-basis:25%;
          text-align: center;
          

          a{
            font-size: 26px;
            color: #000;
          }
          img{
            width: 80%;
            
          }

        }

        input[id^="btn"]:checked+label{

            background: #ff9344;
        }

        #btn_1:checked~ .flex_child{

            left: 0%;
        }
        #btn_2:checked~ .flex_child{

            left: -100%;
        }
        #btn_3:checked~.flex_child{

            left: -200%;
        }
        #btn_4:checked~.flex_child{

            left: -300%;
        }
     
  }
  
  }
}
/* banner end*/

.center{

   width: 100%;
   float: left;
   .center_box{
    width: 90%;
    margin: 0px auto;
   
   .money{
      width: 100%;
      display: flex;
      margin-bottom: 25px;
      margin-top: 45px;
   }
   
    .money>div{
        
        flex-basis:17%;
        
   }
   .money>div:nth-of-type(1){
        
        text-align: center;



   }
   .money>div:nth-of-type(2){
        
        font-size: 26px;
        line-height: 71px;
   }
   .money>div:nth-of-type(3){
        flex:1;
        text-align: right;
        line-height: 71px;
        .more_money{
            width: 150px;
            height: 100%;
            padding-right: 40px;
            font-size: 24px;
            color: #000;
            @include bgImgs('../images/more_money.png',right,center);
        }
   }
   .play{
    width: 100%;
    display: flex;
    justify-content:space-between;


   }
   .play>div{
     flex-basis:23%;
     text-align: center;
     img{
      width: 100%;
     }
   }

  

   
}

.center_box>div:last-of-type{

    margin-bottom: 200px;
}
}

/* center end  */

.footer{
  width:750px;
  position: fixed;
  bottom: 0px;
  
  .menu{

  width: 100%;
  display: flex;
  flex-grow:row;
  justify-content:space-around;
  padding-bottom: 17px;
  padding-top: 17px;
}
.menu > a{
  flex-basis:25px;
  text-align: center;
  font-size: 26px;
  color:#000;

}

}